import { View, Text, TouchableOpacity, ScrollView, Image } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { router } from 'expo-router';
import { useState } from 'react';

// 订单状态数据
const orderTabs = [
  { id: 'all', name: '全部' },
  { id: 'pending', name: '待付款' },
  { id: 'processing', name: '待发货' },
  { id: 'shipped', name: '待收货' },
  { id: 'completed', name: '待评价' },
];

// 模拟订单数据
const orderData = [
  {
    id: '1',
    status: 'pending',
    statusText: '待付款',
    timeLimit: '29:59',
    product: {
      image: require('../../assets/product/p1.jpg'),
      title: 'MLB ENGAOE官方圆领卫衣男女情侣装春季新款宽松休闲重磅内搭上衣',
      specs: '白色/M',
      price: 199,
      quantity: 1
    }
  },
  {
    id: '2',
    status: 'processing',
    statusText: '待发货',
    product: {
      image: require('../../assets/product/p2.jpg'),
      title: '大咖龙舞手办 限定版',
      specs: '典藏版',
      price: 299,
      quantity: 1
    }
  },
  {
    id: '3',
    status: 'shipped',
    statusText: '待收货',
    logistics: '预计明天送达',
    product: {
      image: require('../../assets/product/p3.png'),
      title: '【新年礼物】欧珑赤霞橘光护手霜',
      specs: '标准版',
      price: 159,
      quantity: 2
    }
  },
  {
    id: '4',
    status: 'completed',
    statusText: '待评价',
    product: {
      image: require('../../assets/product/p4.png'),
      title: 'carriere freres法国植物学家CF香薰蜡烛',
      specs: '标准版',
      price: 129,
      quantity: 1
    }
  }
];

export default function OrderListPage() {
  const insets = useSafeAreaInsets();
  const [activeTab, setActiveTab] = useState('all');

  // 根据当前标签筛选订单
  const filteredOrders = activeTab === 'all' 
    ? orderData 
    : orderData.filter(order => order.status === activeTab);

  // 处理订单操作
  const handleOrderAction = (orderId: string, action: string) => {
    console.log('订单操作:', orderId, action);
  };

  return (
    <View className="flex-1 bg-gray-50" style={{ paddingTop: insets.top }}>
      {/* 顶部导航栏 */}
      <View className="bg-white">
        <View className="h-11 px-4 flex-row items-center justify-between">
          <TouchableOpacity
            onPress={() => router.back()}
            className="w-8 h-8 items-center justify-center"
          >
            <Ionicons name="chevron-back" size={24} color="#333" />
          </TouchableOpacity>
          <Text className="text-base font-medium">我的订单</Text>
          <View className="w-8" />
        </View>
      </View>

      {/* 订单状态标签 */}
      <View className="bg-white border-b border-gray-100">
        <ScrollView 
          horizontal 
          showsHorizontalScrollIndicator={false}
        >
          <View className="flex-row h-11">
            {orderTabs.map(tab => (
              <TouchableOpacity
                key={tab.id}
                className="h-full px-3 mx-1 items-center justify-center"
                onPress={() => setActiveTab(tab.id)}
              >
                <Text 
                  className={
                    activeTab === tab.id 
                      ? "text-primary-500 font-medium" 
                      : "text-gray-600"
                  }
                >
                  {tab.name}
                </Text>
                {activeTab === tab.id && (
                  <View className="absolute bottom-0 left-3 right-3 h-0.5 bg-primary-500 rounded-full" />
                )}
              </TouchableOpacity>
            ))}
          </View>
        </ScrollView>
      </View>

      {/* 订单列表 */}
      <ScrollView className="flex-1" showsVerticalScrollIndicator={false}>
        <View className="p-3">
          {filteredOrders.map(order => (
            <View key={order.id} className="bg-white rounded-xl mb-3 overflow-hidden">
              {/* 订单状态栏 */}
              <View className="flex-row items-center justify-between p-3 border-b border-gray-100">
                <View className="flex-row items-center">
                  <Ionicons name="document-text-outline" size={16} color="#666" />
                  <Text className="text-gray-600 text-sm ml-1">订单编号：{order.id}</Text>
                </View>
                <Text className="text-primary-500">{order.statusText}</Text>
              </View>

              {/* 商品信息 */}
              <TouchableOpacity 
                className="p-3"
                activeOpacity={0.7}
                onPress={() => router.push({
                  pathname: "/order/detail",
                  params: { id: order.id }
                })}
              >
                <View className="flex-row">
                  <Image
                    source={order.product.image}
                    className="w-20 h-20 rounded-lg"
                    resizeMode="cover"
                  />
                  <View className="flex-1 ml-3">
                    <Text 
                      className="text-gray-800 text-sm"
                      numberOfLines={2}
                    >
                      {order.product.title}
                    </Text>
                    <Text className="text-gray-400 text-xs mt-1">
                      {order.product.specs}
                    </Text>
                    <View className="flex-row items-center justify-between mt-2">
                      <Text className="text-sm">
                        <Text className="text-gray-400">¥</Text>
                        <Text className="text-gray-800 font-medium">{order.product.price}</Text>
                      </Text>
                      <Text className="text-gray-400 text-sm">x{order.product.quantity}</Text>
                    </View>
                  </View>
                </View>

                {/* 订单信息 */}
                {order.timeLimit && (
                  <View className="mt-2 flex-row items-center">
                    <Ionicons name="time-outline" size={14} color="#666" />
                    <Text className="text-gray-500 text-xs ml-1">
                      支付剩余时间 {order.timeLimit}
                    </Text>
                  </View>
                )}
                {order.logistics && (
                  <View className="mt-2 flex-row items-center">
                    <Ionicons name="bicycle-outline" size={14} color="#666" />
                    <Text className="text-gray-500 text-xs ml-1">
                      {order.logistics}
                    </Text>
                  </View>
                )}

                {/* 订单金额 */}
                <View className="flex-row items-center justify-end mt-3 pt-3 border-t border-gray-100">
                  <Text className="text-sm text-gray-500">
                    共{order.product.quantity}件商品 合计：
                  </Text>
                  <Text className="text-base font-medium text-primary-500">
                    ¥{order.product.price * order.product.quantity}
                  </Text>
                </View>

                {/* 操作按钮 */}
                <View className="flex-row justify-end mt-3 space-x-3">
                  {order.status === 'pending' && (
                    <>
                      <TouchableOpacity
                        className="px-4 py-2 mr-2 border border-gray-200 rounded-full"
                        onPress={() => handleOrderAction(order.id, 'cancel')}
                      >
                        <Text className="text-sm text-gray-600">取消订单</Text>
                      </TouchableOpacity>
                      <TouchableOpacity
                        className="px-4 py-2 bg-primary-500 rounded-full"
                        onPress={() => handleOrderAction(order.id, 'pay')}
                      >
                        <Text className="text-sm text-white">立即付款</Text>
                      </TouchableOpacity>
                    </>
                  )}
                  {order.status === 'shipped' && (
                    <TouchableOpacity
                      className="px-4 py-2 bg-primary-500 rounded-full"
                      onPress={() => handleOrderAction(order.id, 'confirm')}
                    >
                      <Text className="text-sm text-white">确认收货</Text>
                    </TouchableOpacity>
                  )}
                  {order.status === 'completed' && (
                    <TouchableOpacity
                      className="px-4 py-2 bg-primary-500 rounded-full"
                      onPress={() => handleOrderAction(order.id, 'review')}
                    >
                      <Text className="text-sm text-white">评价订单</Text>
                    </TouchableOpacity>
                  )}
                </View>
              </TouchableOpacity>
            </View>
          ))}
        </View>
      </ScrollView>
    </View>
  );
} 